<template>
    <lay-config-provider :themeVariable="appStore.themeVariable" :theme="appStore.theme" :locale="appStore.locale">

        <lay-layout :class="[
            appStore.tab ? 'has-tab' : '',
            appStore.collapse ? 'collapse' : '',
            appStore.greyMode ? 'grey-mode' : ''
        ]">
            <!-- 遮盖层 -->
            <div v-if="!appStore.collapse" class="layui-layer-shade hidden-sm-and-up" @click="collapse"></div>
            <!-- 核心菜单  -->
            <lay-side :width="sideWidth" :class="appStore.sideTheme == 'dark' ? 'dark changeBgc' : 'light'">
                <lay-logo v-if="appStore.logo"></lay-logo>
                <div class="side-menu-wrapper">
                    <div class="side-menu2">
                        <global-menu :collapse="appStore.collapse" :menus="menus" :openKeys="openKeys"
                            :selectedKey="selectedKey" @changeOpenKeys="changeOpenKeys"
                            @changeSelectedKey="changeSelectedKey">
                        </global-menu>
                    </div>
                </div>
            </lay-side>

            <!-- 右侧主体内容 -->
            <lay-layout style="width: 0px">
                <lay-header style="display: flex">
                    <lay-menu class="layui-layout-left">
                        <lay-menu-item @click="collapse">
                            <lay-icon v-if="appStore.collapse" type="layui-icon-spread-left"></lay-icon>
                            <lay-icon v-else type="layui-icon-shrink-right"></lay-icon>
                        </lay-menu-item>
                        <lay-menu-item class="hidden-xs-only" @click="refresh">
                            <lay-icon type="layui-icon-refresh-one"></lay-icon>
                        </lay-menu-item>
                        <lay-menu-item class="hidden-xs-only" v-if="appStore.breadcrumb" style="padding: 0px 15px">1234
                            <GlobalBreadcrumb></GlobalBreadcrumb>
                        </lay-menu-item>
                    </lay-menu>
                    <!-- 菜单分组 -->
                    <lay-menu v-if="appStore.subfield && appStore.subfieldPosition == 'head'" class="layui-nav-center"
                        :selectedKey="mainSelectedKey" @changeSelectedKey="changeMainSelectedKey">
                        <template v-for="(menu, index) in mainMenus" :key="index">
                            <lay-menu-item :id="menu.id" v-if="index < 4">
                                <template #title>{{ menu.title }}</template>
                            </lay-menu-item>
                        </template>
                    </lay-menu>
                    <lay-dropdown v-if="appStore.subfield && appStore.subfieldPosition == 'head'" trigger="hover"
                        placement="bottom">
                        <lay-icon type="layui-icon-more" style="padding: 0px 15px"></lay-icon>
                        <template #content>
                            <lay-dropdown-menu>
                                <template v-for="(menu, index) in mainMenus">
                                    <lay-dropdown-menu-item :key="menu.id" v-if="index >= 4"
                                        @click="changeMainSelectedKey(menu.id)">{{ menu.title }}</lay-dropdown-menu-item>
                                </template>
                            </lay-dropdown-menu>
                        </template>
                    </lay-dropdown>
                    <lay-menu class="layui-layout-right">
                        <lay-menu-item>
                            <lay-fullscreen v-slot="{ toggle, isFullscreen }">
                                <lay-icon @click="toggle()" :type="isFullscreen
                                    ? 'layui-icon-screen-restore'
                                    : 'layui-icon-screen-full'
                                    "></lay-icon>
                            </lay-fullscreen>
                        </lay-menu-item>

                        <lay-menu-item>
                            <lay-dropdown updateAtScroll placement="bottom">
                                <lay-icon type="layui-icon-website"></lay-icon>
                                <template #content>
                                    <lay-dropdown-menu>
                                        <lay-dropdown-menu-item @click="() => (appStore.locale = 'zh_CN')">
                                            <template #default>夜间</template>
                                        </lay-dropdown-menu-item>
                                        <lay-dropdown-menu-item @click="() => (appStore.locale = 'en_US')">
                                            <template #default>白天</template>
                                        </lay-dropdown-menu-item>
                                    </lay-dropdown-menu>
                                </template>
                            </lay-dropdown>
                        </lay-menu-item>
                        <lay-menu-item>
                            <lay-dropdown updateAtScroll placement="bottom">
                                <lay-icon type="layui-icon-username"></lay-icon>
                                <template #content>
                                    <lay-dropdown-menu>
                                        <lay-dropdown-menu-item @click="toUserInfo">
                                            <template #default>用户信息</template>
                                        </lay-dropdown-menu-item>
                                        <lay-dropdown-menu-item @click="toSystemSet">
                                            <template #default>系统设置</template>
                                        </lay-dropdown-menu-item>
                                        <lay-line></lay-line>
                                        <lay-dropdown-menu-item @click="logOut">
                                            <template #default>注销登录</template>
                                        </lay-dropdown-menu-item>
                                    </lay-dropdown-menu>
                                </template>
                            </lay-dropdown>
                        </lay-menu-item>
                    </lay-menu>
                </lay-header>

                <lay-body>
                    <global-tab :class="appStore.tagsTheme == 'concise'
                        ? ''
                        : appStore.tagsTheme == 'underpainting'
                            ? 'underpainting'
                            : 'designer'
                        ">
                    </global-tab>
                    <global-content></global-content>
                </lay-body>
            </lay-layout>
        </lay-layout>
    </lay-config-provider>
</template>
  
<script setup>
import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import useUserStore from '@/stores/user';
import useAppStore from '@/stores/app';
import GlobalMenu from '@/layouts/global/GlobalMenu.vue'
import GlobalBreadcrumb from '@/layouts/global/GlobalBreadcrumb.vue';
import GlobalTab from '@/layouts/global/GlobalTab.vue'
import GlobalContent from '@/layouts/global/GlobalContent.vue'
import { diff, getNode, getParents } from '@/utils/functions.js';
const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()
console.log(appStore)
// 菜单数据
const menus = userStore.menus;
const openKeys = ref([]);
const selectedKey = ref('');

const changeOpenKeys = (keys) => {
    const addArr = diff(openKeys.value, keys);
    if (keys.length > openKeys.value.length && appStore.accordion.value) {
        var arr = getParents(menus.value, addArr[0]);
        if (arr && arr.length > 0) {
            openKeys.value = arr.map(item => item.id);
        }
    } else {
        openKeys.value = keys;
    }
}
const changeSelectedKey = (key) => {

    var node = getNode(userStore.menus, key);
    if (node.type && node.type == "modal") {
        layer.open({
            type: "iframe",
            content: node.id,
            area: ["80%", "80%"],
            maxmin: true,
        });
        return;
    }
    if (node.type && node.type == "blank") {
        window.open(node.id, "_blank");
        return;
    }
    router.push(key);
}


const sideWidth = computed(() =>
    appStore.collapse
        ? '60px'
        : appStore.subfield && appStore.subfieldPosition == 'side'
            ? '280px'
            : '220px'
)






onMounted(() => {
    if (document.body.clientWidth < 768) {
        appStore.collapse = true
    }
})



const collapse = () => {
    appStore.collapse = !appStore.collapse
}
const refresh = () => {
    appStore.routerAlive = false
    setTimeout(function () {
        appStore.routerAlive = true
    }, 500)
}
// 退出
const logOut = () => {
    const userInfoStore = useUserStore()
    userInfoStore.token = ''
    userInfoStore.userInfo = {}
    router.push('/login')
}

</script>
  
<style lang="scss">
@media screen and (max-width: 767px) {
    .layui-side {
        position: absolute;
        height: 100vh;
    }
}

/*鼠标经过背景色，增加了improtant，否则设置无效*/
.layui-header .layui-nav-item .layui-icon:hover {
    background: whitesmoke !important;
}

/*面包屑颜色兼容*/
.layui-header .layui-nav-item .layui-breadcrumb a {
    color: #999 !important;
}

.layui-header .layui-nav-item .layui-breadcrumb a:nth-last-child(2) {
    color: #666 !important;
}

/*图标默认颜色修复，指定 .layui-icon 去掉improtant，否则无法设置图标其他颜色*/
.layui-header .layui-nav-item .layui-icon {
    color: #666;
}

/*取消默认a标签的padding:0 20px，否则扩大图标后容器变形*/
.layui-header .layui-nav-item>a {
    padding: 0 !important;
}

/*扩大图标尺寸与所在容器大小一致，默认大小导致鼠标必须点击图标才能触发事件效果*/
.layui-header .layui-nav-item .layui-icon {
    height: 50px;
    padding: 20px;
}

/*增加鼠标经过图标时改变图标颜色，颜色为当前系统主题色*/
.layui-header .layui-nav-item .layui-icon:hover {
    color: var(--global-primary-color) !important;
}

.grey-mode {
    filter: grayscale(1);
}

.side-menu-wrapper {
    width: 100%;
    overflow-y: auto;
    height: calc(100% - 52px);
    display: flex;
}

.side-menu-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.side-menu-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgb(40, 51, 62);
}

.light .side-menu-wrapper::-webkit-scrollbar-thumb {
    background-color: #e2e2e2;
}

.side-menu1 {
    width: 60px;
    flex: 0 0 60px;
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.light .side-menu1 {
    border-right: 1px solid whitesmoke;
}

.side-menu2 {
    flex: 1;
}

.changeBgc {
    background-color: #171717 !important;
}

.underpainting {
    .layui-tab-title {
        .layui-this {
            color: var(--global-primary-color) !important;
            border-bottom: 2px solid var(--global-primary-color) !important;
            background-color: #009b8e0d !important;

            .layui-icon {
                color: var(--global-primary-color) !important;
            }
        }
    }
}

.layui-body>.global-tab>.layui-tab>.layui-tab-head>.layui-tab-title>li {
    height: 38px;
    line-height: 38px;
}

.designer {
    padding-left: 5px;
    box-sizing: border-box;

    .layui-tab-head {
        background-color: unset !important;
    }

    .layui-tab-title {
        background-color: unset !important;

        >li {
            background-color: #fff;
            margin: 5px 0 0 5px;
            border-radius: 4px;
            height: 32px !important;
            line-height: 32px !important;
        }
    }
}
</style>
  